<script>
import {getArtists,getArtistDesc} from '../music.api.js'
import {getComment,commit,delComment,upload} from '../api'
export default {
    name:'artist',
    data(){
        return{
            artist:{
                alias:[]
            },
            hotSongs:[],
            activeTab:'hotsong',
            introduction:[],
            topicData:[],
            commit:'',
            comment:[]
        }
    },
    created(){
        let id = this.$route.params.id;
        getArtists({id:id}).then(res=>{
            // console.log(res)
            if(res.code === 200){
                this.artist = res.artist;
                this.hotSongs = res.hotSongs;
            }
        });
        getArtistDesc({id:id}).then(res=>{
            if(res.code === 200){
                this.introduction = res.introduction;
                this.topicData = res.topicData;
            }
        })
        this.getComment(id)
    },
    mounted(){
        // tinymce.init({selector:'textarea'});
    },
    filters:{
        durt(dt){
            let minute = Math.floor(dt/1000/60);
            let second = Math.floor((dt/1000)%60);
            return minute+':'+(second<10?'0'+second:second)          
        }
    },
    methods:{
        async getComment(id){
            let res = await getComment({form:'Commit',title:id.toString()})
            this.comment = res.data.reverse()
        },
        delCommit(hash){
            let id = this.$route.params.id;
            delComment({hash:hash}).then(res=>{
                if(res.status ===200){
                    this.getComment(id);
                }
            })
        },
        sendCommit(){
            // console.log(this.commit)
            if(this.commit.replace(/\' '/g,'')==''){
                alert('未填写！')
                return
            }
            commit({title:this.artist.id,content:this.commit}).then(res=>{
                if(res.status ===200){
                    this.getComment(this.artist.id);
                    this.commit = ''
                }else{
                    this.$login()
                    // alert(res.msg)
                }
            })
        },
        toSong(id){
            window.open('https://music.163.com/#/song?id='+id)
        },
        toAlbum(id){
            window.open('https://music.163.com/#/album?id='+id)
        },
        play(id){
            this.$play('<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id='+id+'&auto=1&height=66"></iframe>')
        },
        uploadFile(){
            let file = this.$refs.img.files[0] ||null;
            if(!file){
                return 
            }
            let form = new FormData();
            form.append('image',file);
            upload(form)
        }
    }
}
</script>
<template>
    <div class="artist">
        <div class="artist-img">
            <img :src="artist.picUrl" >
            <div class="mask">
                <p class="artist-name">{{artist.name}}
                    <span class="alias-name">{{artist.alias.join(' / ')}}</span>    
                </p>
            </div>
        </div>
        <div class="artist-main">
            <div class="artist-main-tab clearfix">
                <div 
                :class="['artist-main-tab_item','fl',activeTab==='hotsong'&&'activeTab']"
                @click="activeTab='hotsong'"                
                >热门歌曲</div>
                <div 
                :class="['artist-main-tab_item','fl',activeTab==='artist'&&'activeTab']"
                @click="activeTab='artist'"
                >歌手介绍</div>
                <div 
                :class="['artist-main-tab_item','fl',activeTab==='commit'&&'activeTab']"
                @click="activeTab='commit'"
                >想对TA说</div>
            </div>
            <div class="artist-main-pane">
                <div 
                v-show="activeTab==='hotsong'"
                :class="['artist-main-pane_item']"
                >
                    <ul class='artist-hotsongs'>
                        <template v-for="(song,idx) in hotSongs">
                        <li 
                        class="artist-song clearfix"
                        :style="{background:idx%2===0&&'#f7f7f7'}"
                        :key="idx"
                        >   
                            <span class="idx fl">{{idx+1}}</span>    
                            <div class="album fl">
                                <img 
                                class="album-face"
                                @click='toAlbum(song.al.id)'
                                :src="song.al.picUrl?song.al.picUrl:'/static/album.jpg'" :title="song.al.name">
                            </div>
                            <span class="name fl"
                            @click='toSong(song.id)'
                            >
                                {{song.name}}
                            </span>
                            <span
                            class="play fr"
                            >   
                                <img 
                                @click="play(song.id)"
                                src="/static/ios-play.png" alt="" >
                            </span>
                            <span class="time fr">
                                {{song.dt|durt}}
                            </span>
                        </li>
                        </template>
                    </ul>
                </div>
                <div 
                v-show="activeTab==='artist'"
                :class="['artist-main-pane_item']"
                >
                <p class="desc-title"><i>&nbsp;</i>{{artist.name}}简介</p>
                <p class="desc-content">{{artist.briefDesc?artist.briefDesc:'暂无简介'}}</p>
                <template
                v-for="(int,edx) in introduction"
                >
                <div class="introduction"
                :key="edx"
                >
                    <p class="desc-title"><i>&nbsp;</i>{{int.ti}}</p>
                    <p class="desc-content" 
                    v-for="(text,idx) in int.txt.split('\n')"
                    :key="idx"
                    >{{text}}</p>
                </div>
                </template>
                </div>
                <div class="detail-post "
                v-show="activeTab==='commit'"
                >
                    <p>评论</p>   

                    <div class="form clearfix">
                        <!-- <input type="file" @change="uploadFile" ref="img"> -->
                        <textarea v-model="commit"/>
                        <button class="fr" @click="sendCommit">评论</button>   
                    </div> 
                    <ul class="detail-post-main">
                        <template
                        v-for="co in comment"
                        >
                            <li class="detail-comment"
                            :key="co.hash"
                            >
                                <div class="comment-info clearfix">
                                    <img src="/static/avatar.jpg" class="fl" alt="">
                                    <span class="fl user">0231019</span>
                                    <span class="fr del" @click="delCommit(co.hash)">删除</span>
                                </div>
                                <div class="comment-main">{{co.content}}</div>
                                <div class="comment-time">Create At：{{new Date(co.CreateTime*1000).toLocaleDateString()}}</div>
                            </li>
                        </template>    
                    </ul>
                </div> 
            </div>
        </div>
    </div>
</template>
<style lang="stylus" scoped>
.artist
    padding: 45px 25px 15px;
    border-bottom: 1px solid #e6e6e6;
    &-name 
        font-size 24px 
        font-weight bold
        position absolute
        bottom 0
        left 20px
        margin-bottom 10px
        color white
        .alias-name
            font-size 12px
            font-weight 100
    &-img 
        position relative
        width 450px 
        height 211px 
        overflow hidden
        z-index 1
        img 
            position absolute
            left 0
            top 0
            width 100%
            z-index 0
        .mask 
            position absolute
            left 0
            top 0
            width 100%
            height 100%
            background-image url(/static/mask.png)
            background-size cover
    &-main
        position relative
        padding 10px 0 
        &-tab
            margin-bottom 20px
        &-tab_item  
            width 150px
            text-align center
            font-size 12px
            color #777
            user-select none
            cursor pointer
            border-bottom 1px solid #fff
            &.activeTab
                color #000
    &-song 
        position relative
        list-style none
        margin 5px 0
        .idx
            height 50px
            line-height 50px
            font-size 12px
            width 40px
            text-align center
            color #999 
            padding 0 10px 
        .album-face 
            display block
            width 50px 
            height 50px
            margin-bottom 0
            cursor pointer
        .name 
            margin-left 20px 
            height 50px 
            line-height 50px 
            font-size 12px 
            width 230px 
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            color #1a1a1a
            cursor pointer
            &:hover
                text-decoration underline 
        .time,.play
            margin-right 20px 
            height 50px 
            line-height 50px 
            font-size 12px 
            color #1a1a1a
            img 
                width 20px
                display inline-block
                margin-bottom 0
                vertical-align: -6px;
                cursor pointer
    .desc-title
        font-size 14px 
        font-weight bold
        margin 10px 0
        i
            height: 14px;
            width: 3px;
            margin-right: 7px;
            background: #E6C226;
    .desc-content
        font-size 12px
        line-height 25px 
        color #333
        word-break break-wrod
        text-indent 2em
        margin 0 
    .detail-post
        p 
            font-size 14px
        &-main 
            position relative
            li.detail-comment
                list-style none
                padding 10px 0
                .comment-info
                    position relative
                    &:hover .del
                        opacity 1
                    img 
                        width 20px 
                        height 20px
                        margin-bottom 0
                    span.user 
                        color #a1a1a1 
                        font-size 12px
                        margin-left 12px
                        cursor pointer
                        &:hover
                            text-decoration underline 
                    span.del
                        color #a1a1a1 
                        font-size 12px
                        margin-left 12px
                        cursor pointer
                        opacity 0
                        &:hover
                            text-decoration underline 
                .comment-main
                    text-indent  2em
                    color #535353 
                    font-size 12px
                    margin-left 12px
                .comment-time
                    text-align right
                    color #797979 
                    font-size 12px
                    margin-left 12px
</style>


